<template>
	<view>
		<uni-popup ref="popup" :safe-area="false">
			<view class="bottom-popup">
				<view class="popup-title d-flex psr a-center j-center">
					<view class="text-title">选择身高</view>
					<image @tap="closePopup" class="title-icon" src="@/static/image/close.png"></image>
				</view>
				<view class="popup-row">
					<picker-view indicator-style="height: 70rpx;background: #F5F5F5;z-index: 0;" :value="value" @change="bindChange" class="picker-view">
						<picker-view-column>
							<view class="item d-flex a-center j-center" :style="`${value[0]==index?select:noSelect}`" v-for="(item,index) in heights" :key="index">{{item}}cm</view>
						</picker-view-column>
						
					</picker-view>
				</view>
				<view class="popup-button d-flex j-center">
					<tm-button _style="font-weight: 600;" round="5" :width="650" :shadow="-1"
					    :linear-color="['#64F1C5', '#29DBA3']" linear="left" :fontSize="32" fontColor="#FFFFFF" @tap="determine"
					    label="确定"></tm-button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>
<script setup lang="ts">
import { ref, defineEmits } from "vue";

const select ="font-size: 40rpx;color:#1DC691"
const noSelect ="font-size: 30rpx;color:#333333"

const heights:any = ref([]);
//初始化选择组件
for (let i = 0; i <= 130; i++) {
	heights.value.push(100 + i);
}

const popup = ref()
const showPopup = (initialHeight:number) => {
	
	popup.value.open("bottom")
	if(initialHeight==null)initialHeight = 165;//初始身高
	//初始默认值
	let heightIndex = heights.value.indexOf(initialHeight);
	value.value = [heightIndex]
}
const closePopup = () => {
	popup.value.close()
}
const value = ref([164])

const bindChange = (e:any) => {
	const val = e.detail.value;
	value.value = val
}
//确定选择并给父页面传值
const emit = defineEmits(["onGetHeight"])
const determine = () => {
	emit("onGetHeight", heights.value[value.value[0]]);
	closePopup();//关闭
}

defineExpose({
  showPopup,
  closePopup
});
</script>
<style lang="scss" scoped>

.bottom-popup{
		padding-bottom: 60rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 0rpx 0rpx;
		.popup-title{
			height: 100rpx;
			border-bottom: 1rpx solid #E4E4E4;
			.title-text{
				position:absolute;
				top:34rpx;
				left:50rpx;
				height: 32rpx;
				width: 234rpx;
			}
			.title-icon{
				position:absolute;
				top:32rpx;
				right: 30rpx;
				
				width: 36rpx;
				height: 36rpx;
			}
		}
		.popup-show{
			justify-content: space-between;
			height: 80rpx;
			padding: 0 30rpx 0 30rpx;
			.show-text{
				font-size: 32rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
			}
		}
		.popup-row{
			padding-bottom: 16rpx;
			.picker-view {
				height: 400rpx;
				margin-top: 20rpx;
			}
			
			.item {
				line-height: 70rpx;
				text-align: center; 
				
				font-size: 34rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				
			}
			
		}
		.popup-button{
			.button-button{
				border-radius: 45rpx;
			}
		}
	}
</style>